<script setup lang="ts">
import {useUserPinia} from '~/stores/user'
import {storeToRefs} from "pinia";
import {onMounted, ref, onBeforeMount} from "vue";

import HP5050 from "~/public/shop/HP5050_banner-Lido_03_Ivory_Boucle_1011-992x1120_672x448.webp"
// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()
const userStore = useUserPinia()
const {token, rating_five} = storeToRefs(userStore);


const online_list1 = ref([
    {
      id: "1",
      title: '提升多达5%的购物车转化率',
      subTitle: "更简便的收银台付款流程优化成单“最后一公里”链路。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/combined-card1.10caf1b8.svg'
    },
    { 
      id: "2",
      title: '提升电商客单价',
      subTitle: "不同商家的商品可合并为一笔完成支付，交易完成后资金分别结算至对应商家。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/combined-card2.f902a4a9.svg'
    },
    { 
      id: "3",
      title: '提升平台GMV',
      subTitle: "更多的复购和更高的客单价，帮助平台实现业务的快速增长。",
      src: 'https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/combined-card3.8087d791.svg'
    }
 ])


 const carousel_Images = computed(() => {
  return [
    {
        headImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*-8_FQYFnACUAAAAAAAAAAAAADmesAQ/fmt.webp',
        subImage: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*bENuTIL2sSoAAAAAAAAAAAAADmesAQ/fmt.webp'
    }
  ]
})

const example_list = ref([
    {
      id: "1",
      src: 'https://gw.alipayobjects.com/mdn/huamei_e3pl6d/afts/img/A*fTLSQqvRqRIAAAAAAAAAAAAADmOsAQ/fmt.webp'
    },
    {
      id: "1",
      src: 'https://gw.alipayobjects.com/mdn/huamei_e3pl6d/afts/img/A*-FBwRITcMpUAAAAAAAAAAAAADmOsAQ/fmt.webp'
    },
    {
      id: "1",
      src: 'https://gw.alipayobjects.com/mdn/huamei_e3pl6d/afts/img/A*-4c1Qoutm7MAAAAAAAAAAAAADmOsAQ/fmt.webp'
    },
])


/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});


// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};



onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();

})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

</script>

<template>
  <v-app>
    <!-- 主图-->
     <banner-main
      themeColor="black"
      :lists_bottom="online_list1"
      :lists="carousel_Images" 
      title="合并支付" 
      subTitle="专为平台商户打造的跨卖家合并付款，让顾客“一键清空”购物车更爽快了。"
     ></banner-main>
     <div class="font-semibold text-3xl text-center mt-40 mb-40">支持多商家、多地区、多币种合并付款，顺应电商平台的全球化发展步伐</div>
      <div class="w-9/12 mx-auto d-flex justify-center">
        <v-img class="" width="440px" height="770px" v-for="img in example_list" :key="img.id" :src="img.src"/>
      </div>

    <footer-other></footer-other>

  </v-app>

</template>

<style scoped>

</style>